// 引入各个组件的Props
import QuestionTitleConf, { QuestionTitlePropsType } from './QuestionTitle'
import QuestionInputConf, { QuestionInputPropsType } from './QuestionInput'
import QuestionDatePickConf, { QuestionDatePickerPropsType } from './QuestionDatePick'
import QuestionParagraphConf, { QuestionParagraphPropsType } from './QuestionParagraph'
import QuestionInfoConf, { QuestionInfoPropsType } from './QuestionInfo'
import QuestionRadioConf, { QuestionRadioPropsType, QuestionRadioStatType } from './QuestionRadio'
import QuestionCheckboxConf, { QuestionCheckBoxPropsType, QuestionCheckBoxStatType } from './QuestionCheckobx'

// 组件的配置属性
export type ComponentPropsType = QuestionTitlePropsType &
  QuestionInputPropsType &
  QuestionDatePickerPropsType &
  QuestionParagraphPropsType &
  QuestionInfoPropsType &
  QuestionRadioPropsType &
  QuestionCheckBoxPropsType

// 组件统计信息属性
export type ComponentStatType = QuestionRadioStatType & QuestionCheckBoxStatType

// 组件的配置信息
export type ComponentConfType = {
  title: string
  type: string
  // 组件本身
  Component: React.FC<ComponentPropsType>
  // 配置组件
  PropComponent: React.FC<ComponentPropsType>
  // 统计组件，部分组件才有
  StatComponent?: React.FC<ComponentStatType>
  defaultProps: ComponentPropsType
}

// 全部组件的配置
const componentsConfList: ComponentConfType[] = [
  QuestionTitleConf,
  QuestionInputConf,
  QuestionDatePickConf,
  QuestionParagraphConf,
  QuestionInfoConf,
  QuestionRadioConf,
  QuestionCheckboxConf
]

// 组件分组
export const componentsGroup = [
  {
    groupName: '文本显示',
    components: [QuestionInfoConf, QuestionTitleConf, QuestionParagraphConf]
  },
  {
    groupName: '用户输入',
    components: [QuestionInputConf, QuestionDatePickConf]
  },
  {
    groupName: '用户选择',
    components: [QuestionRadioConf, QuestionCheckboxConf]
  }
]

// 根据type找到对应的组件
export function getComponentConfByType(type: string) {
  return componentsConfList.find(item => item.type === type)
}
